<template>
  <div>
    <h1 class="f-34 text-c v">{{ $t('hello') }}</h1>
    <p class="f-18 text-c">{{ $t('welcome') }}</p>
    <p class="f-18 text-c">{{ $t('home.title') }}</p>
    <p class="f-18 text-c">{{ $t('home.content') }}</p>
    <div class="m-10">
      <button class="m-10 btn" @click="handleChangeLang('en')">English</button>
      <button class="m-10 van-button"  @click="handleChangeLang('zh')">中文</button>
    </div>
  </div>
</template>

<script setup>
import { ref , reactive , onMounted} from 'vue';
import { setLang } from '@/i18n/i18n';
import {getTest} from './api/home.js';

onMounted(() => {
  handleGetTest();
})
const handleChangeLang = (lang) => {
  setLang(lang);
}
const handleGetTest = async () => {
 try {
  let params = {
   name: 'test'
  }
  let res = await getTest(params);
  console.log(res);
 } catch (error) {
  console.log(error);
 }
}
</script>